<template>
	<view class="content">
		<u-navbar :is-back="false" title="科特泰山超市">
		<!-- 	<view class="slot-wrap">
				<image src="../../static/fel/logo.png" mode="scaleToFill" style="width: 122rpx; height: 66rpx; margin-left: 314rpx;"></image>
			</view> -->
		</u-navbar>
		<view class="sousuo">
			<u-search :disabled="true" @click="gopage" placeholder="请输商品名称" height="48" margin="16rpx 0" :action-style="sousouBtn"
			 @custom='gopage'></u-search>
		</view>
		<view class="lunbotu">
			<u-swiper :list="list" height="280" mode="rect" name="pic" img-mode="scaleToFill"></u-swiper>
		</view>
		<view class="fenlei">
			<u-row>
				<u-col span="3" v-for="(item,index) in  fenleiList" :key="index">
					<view class="flBox" @click="gofenlei(item.name)">
						<image class="flimg" :src="item.pic" mode="scaleToFill"></image>
						<view class="flName">
							{{item.name}}
						</view>
					</view>
				</u-col>
			</u-row>
		</view>
		<view class="mskfBox">
			<u-row>
				<u-col span="6">
					<view class="xsms" @click="gomiaosha">
						<view class="xsmstitle">
							<text style="color: #FF0101;">{{ms.store_name}}</text><text>限时秒杀</text>
						</view>
						<view class="xsms_name">
							感恩回馈
						</view>
						<view class="xxms_img">
							<image class="havess" v-if="ms.image" :src="ms.image" mode="scaleToFill" style="width: 249rpx; height: 249rpx;"></image>
							<image v-else src="../../static/fel/cpt.jpg" mode="scaleToFill" style="width: 249rpx; height: 249rpx;"></image>
							<!-- <u-image width="249rpx" height="249rpx" :src="ms.image" mode="scaleToFill"></u-image> -->
						</view>
						<view class="xsms_btn">
							立即抢购
						</view>
					</view>
				</u-col>
				<u-col span="6">
					<view class="newBox" @click="xinyonghu">
						<view class="xsmstitle">
							<text style="color: #FF0101;">新用户</text><text>专享</text>
						</view>
						<view class="xsms_name">
							品质好物
						</view>
						<view class="new_imgbox">
							<u-row>
								<u-col span="5">
									<view class="new_img_s">
										<image v-if="newVal[0].image" :src="newVal[0].image" mode="scaleToFill" style="width: 119rpx; height: 119rpx;"></image>
										<image v-else src="../../static/fel/cpt3.jpg" mode="scaleToFill" style="width: 119rpx; height: 119rpx;"></image>
										<!-- <u-image width="119rpx" height="119rpx" :src="newVal[0].image"></u-image> -->
									</view>
								</u-col>
								<u-col span="7">
									<image v-if="newVal[1].image" :src="newVal[1].image" mode="scaleToFill" style="width: 174rpx; height: 174rpx;"></image>
									<image v-else src="../../static/fel/cpt2.jpg" mode="scaleToFill" style="width: 174rpx; height: 174rpx;"></image>
									<!-- <u-image class="new_img_b" width="174rpx" height="174rpx" :src="newVal[1].image"></u-image> -->
								</u-col>
							</u-row>
						</view>
					</view>
					<view class="kefuBox">
						<view class="xsmstitle">
							<text style="color: #FF0101;">24h</text><text>在线客服</text>
						</view>
						<view class="xsms_name">
							售后保障
						</view>
						<view class="kefuImgBox">
							<image class="kefuImg" src="../../static/fel/kefu.png" mode="scaleToFill"></image>
						</view>
						<button class="openkefu" open-type="contact"></button>
					</view>
				</u-col>
			</u-row>
		</view>
		<view class="jupyx">
			商品优选
		</view>
		<view class="shopBox">
			<u-row>
				<u-col span="6" v-for="(item,index) in shoparr" :key='index' @click="shopxiangqing(item)">
					<view class="shopval">
						<u-image width="100%" height="344rpx" :src="item.image" mode="aspectFit"></u-image>
						<view class="shop_name">
							{{item.store_name}}
						</view>
						<view class="shop_msg">
							{{item.store_info}}
						</view>
						<view class="jiageBox">
							FCFA{{item.price}}
						</view>
					</view>
				</u-col>
			</u-row>
		</view>
		<view class="yhqBack" v-if="yhqtf" @click="yhqtf = false">
			<view class="yhqBox" @click.stop="">
				<view class="yhqcloseBox" @click="yhqtf = false">
					<image src="../../static/fel/yhqclose.png" mode="scaleToFill"></image>
				</view>
				<view class="yhq_title">
					恭喜你获得优惠券
				</view>
				<view class="yhqlist_box">
					<view class="yhqitem" v-for="(item,index) in yhqlist" :key='index'>
						<view class="yhq_left">
							<text class="yhq_fuhao">FCFA</text>
							<text class="yhq_jiage">{{ Number(item.coupon_price) }}</text>
						</view>
						<view class="yhq_val">
							<view class="yhq_val_top">
								优惠券
							</view>
							<view class="yhq_val_fanwei">
								使用范围：满{{Number(item.use_min_price)}}减{{Number(item.coupon_price)}}元
							</view>
						</view>
						<view class="yqh_btn">
							去使用
						</view>
					</view>
				</view>
				<view class="yhq_ljxg" @click="yhqtf = false">
					立即选购
				</view>
			</view>
		</view>
		<view class="getinfo" v-if="!info">
			<button class="infobtn" type="default" open-type="getUserInfo" @getuserinfo="getuserinfo"></button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				sousouBtn: {
					width: "100rpx",
					background: "#808080",
					borderRadius: '24rpx',
					color: "#fff",
					fontSize: "26rpx",
					height: "48rpx",
					lineHeight: "48rpx"
				},
				list: [], //轮播图
				ms: {},
				newVal: {

					// 新用户专享展示图
				},
				shoparr: [],
				yhqtf: false,
				yhqlist: [],
				fenleiList: [],
				info: null,
				code: null
			}
		},
		onLoad() {
			// uni.showShareMenu()
			uni.getStorage({
				key: "userinfo",
				success: (res) => {
					console.log('info',res.data);
					this.info = res.data
				},
				fail: (err) => {

				},
			})
			uni.login({
				provider: 'weixin',
				success: (res) => {
					this.code = res.code
					console.log('穿的code',this.code);
				}
			})
			this.getLunbotu();
			this.getmisosha();
			this.getshoplist();
			this.getxinrenImg();
			// this.getyouhuiquan();

		},
		methods: {
			// getyouhuiquan() {
			// 	uni.request({
			// 		url: this.$AJAX_URL + 'coupon/coupon_list',
			// 		success: (res) => {
			// 			console.log(res);
			// 			this.yhqlist = res.data.data.list
			// 		}
			// 	})
			// },
			getxinrenImg() {

			},
			gofenlei(index) {
				getApp().globalData.index = index;
				uni.switchTab({
					url: '../fenlei/fenlei'
				})
			},
			getshoplist() {
				uni.request({
					url: this.$AJAX_URL + 'goods/product_good_list',
					success: (res) => {
						console.log('所有商品',res);
						if (res.data.code === 200) {
							this.shoparr = res.data.data
						}
					}
				})
			},

			getLunbotu() {
				uni.request({
					url: this.$AJAX_URL + 'index/index',
					success: (res) => {
						// console.log(res);
						if (res.statusCode === 200) {
							this.list = res.data.data.banner
							this.fenleiList = res.data.data.menus.splice(0, 8);
							this.newVal = res.data.data.xr_product
							console.log('新人',this.newVal);
						} else {
							this.$u.toast('接口连接失败')
						}

					},
					fail: (err) => {
						this.$u.toast(err.errMsg)
					}
				})
			},
			getmisosha() {
				uni.request({
					url: this.$AJAX_URL + 'goods/solitaire_product_list',
					success: (res) => {
						if (res.statusCode === 200) {
							this.ms = res.data.data[0]
						} else {
							this.$u.toast('接口连接失败')
						}
					},
					fail: (err) => {
						this.$u.toast(err.errMsg)
					}
				})
			}, 
			getuserinfo(e) {
				console.log(e);
				console.log('我在这');
				console.log(e.detail.userInfo);
				// console.log(JSON.parse(e.detail.rawData));
				var val = e.detail.userInfo
				// console.log(this.code);
				if (e.detail.errMsg == "getUserInfo:ok") {
					uni.showLoading({
						title: '正在登陆',
						mask: true,
					})
					uni.request({
						url: this.$AJAX_URL + 'login/login',
						method: 'POST',
						data: {
							code: this.code,
							nickName: val.nickName,
							avatar: val.avatarUrl,
							sex: val.gender,
							// language: val.language,
							// province: val.province,
							// country: val.country,
							// city: val.city
						},

						success: (res) => {
							console.log(res);
							this.info = res.data.data
							this.yhqlist = res.data.data.coupon_list
							uni.setStorage({
								key: 'userinfo',
								data: res.data.data,
								success: () => {
									uni.hideLoading()
									this.$u.toast('登陆成功')
									if (this.yhqlist.length) {
										this.yhqtf = true;
									}

								}
							})
						},
						fail: (err) => {
							uni.hideLoading()
							this.$u.toast(err.errMsg)
						}
					})
				}
			},
			gopage() {
				uni.navigateTo({
					url: '../sousuo/sousuo'
				})
			},
			shopxiangqing(item) {
				uni.navigateTo({
					url: '../xiangqing/xiangqing?id=' + item.id
				})
			},
			gomiaosha() {
				uni.navigateTo({
					url: '../xianshims/xianshims'
				})
			},
			xinyonghu() {
				uni.navigateTo({
					url: '../xinzhuanxiang/xinzhuanxiang'
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F7F7F7;
	}

	.slot-wrap {
		display: flex;
		align-items: center;
		/* 如果您想让slot内容占满整个导航栏的宽度 */
		flex: 1;
		text-align: center;
		/* 如果您想让slot内容与导航栏左右有空隙 */
		/* padding: 0 30rpx; */
	}

	.sousuo {
		padding: 0 30rpx;
	}

	.fenlei {
		margin: 40rpx 20rpx 20rpx;
	}

	.flBox {
		width: 100%;
		text-align: center;

		// height: 113rpx;
		.flimg {
			width: 113rpx;
			height: 113rpx;
			margin: 0 auto;
			border-radius: 10rpx;
		}

		.flName {
			text-align: center;
			width: 100%;
			margin-top: 14rpx;
			font-size: 24rpx;
			color: #000;
			margin-bottom: 10rpx;
		}
	}

	.mskfBox {
		margin: 29rpx 28rpx 28rpx;

		.xsms {
			width: 340rpx;
			height: 473rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			overflow: hidden;

			.xsmstitle {
				margin-left: 19rpx;
				margin-top: 15rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;

				text {
					font-size: 34rpx;
					font-weight: bold;
				}

			}

			.xsms_name {
				color: #008CE2;
				font-size: 22rpx;
				margin-left: 21rpx;
				// margin-top: 12rpx;
			}

			.xxms_img {
				text-align: center;
				// margin-left: 46rpx;
				margin-top: 25rpx;
			}
		}

		.xsms_btn {
			width: 160rpx;
			height: 48rpx;
			margin: 29rpx auto;
			text-align: center;
			line-height: 48rpx;
			border: 1px solid #FF0101;
			color: #FF0101;
			border-radius: 24rpx;
		}
	}

	.newBox {
		height: 277rpx;
		background: #fff;
		overflow: hidden;
		border-radius: 10rpx;

		.xsmstitle {
			margin-left: 19rpx;
			margin-top: 15rpx;

			text {
				font-size: 34rpx;
				font-weight: bold;

			}
		}

		.xsms_name {
			color: #008CE2;
			font-size: 22rpx;
			margin-left: 21rpx;
			// margin-top: 10rpx;
		}

		.new_imgbox {
			overflow: hidden;

			.new_img_s {
				margin-top: 50rpx;
			}
		}
	}

	.kefuBox {
		margin-top: 10rpx;
		height: 186rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		overflow: hidden;
		position: relative;

		.xsmstitle {
			margin-left: 19rpx;
			margin-top: 15rpx;

			text {
				font-size: 34rpx;
				font-weight: bold;
			}
		}

		.xsms_name {
			color: #008CE2;
			font-size: 22rpx;
			margin-left: 21rpx;
			// margin-top: 10rpx;
		}

		.kefuImgBox {
			float: right;
			position: relative;
			top: -30rpx;

			.kefuImg {
				width: 136rpx;
				height: 112rpx;
			}
		}

		.openkefu {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			opacity: 0;
		}
	}

	.jupyx {
		width: 100%;
		border-left: 6rpx solid #333333;
		padding-left: 20rpx;
		color: #000;
		font-size: 32rpx;
	}

	.shopBox {
		margin-top: 40rpx;

		.shopval {
			margin-bottom: 20rpx;
			height: 540rpx;
			border-radius: 20rpx;
			background: #FFFFFF;
			overflow: hidden;

			.shop_name {
				margin-left: 15rpx;
				font-size: 32rpx;
				margin-top: 19rpx;
				margin-right: 20rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.shop_msg {
				margin-left: 10rpx;
				margin-right: 28rpx;
				font-size: 24rpx;
				color: #333333;
				margin-top: 10rpx;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
				// color: #2699F2;
			}

			.jiageBox {
				color: #FF392B;
				font-size: 30rpx;
				margin-left: 17rpx;
				margin-top: 10rpx;
			}
		}
	}

	.yhqBack {
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);

		.yhqBox {
			background: url('http://www.wkzhibo.com/yhqBack.png');
			background-size: cover;
			height: 558rpx;
			width: 540rpx;
			position: absolute;
			top: 0;
			right: 0;
			left: 0;
			bottom: 0;
			margin: auto;

			.yhqcloseBox {
				float: right;
				margin-top: 10rpx;
				margin-right: 10rpx;

				image {
					width: 40rpx;
					height: 40rpx;
				}
			}

			.yhq_title {
				text-align: center;
				width: 100%;
				font-size: 42rpx;
				color: #FFFFFF;
				margin-top: 35rpx;
			}

			.yhqlist_box {
				margin-top: 35rpx;
				padding: 0 30rpx;

				.yhqitem {
					width: 480rpx;
					height: 98rpx;
					background: #FFFFFF;
					border-radius: 10rpx;
					padding-left: 19rpx;
					padding-right: 30rpx;
					padding-top: 20rpx;
					display: flex;
					position: relative;
					margin-bottom: 10rpx;

					.yhq_left {
						width: 123rpx;

						.yhq_fuhao {
							font-size: 28rpx;
							color: #333333;
						}

						.yhq_jiage {
							color: #333333;
							font-size: 46rpx;
						}
					}

					.yhq_val {
						.yhq_val_top {
							font-size: 24rpx;
							color: #333333;
						}

						.yhq_val_fanwei {
							font-size: 18rpx;
							color: #808080;
						}
					}

					.yqh_btn {
						width: 98rpx;
						height: 44rpx;
						text-align: center;
						line-height: 44rpx;
						color: #FF5150;
						border: 1px solid #FF5150;
						border-radius: 22rpx;
						font-size: 22rpx;
						position: absolute;
						right: 30rpx;
						top: 0;
						bottom: 0;
						margin: auto;
					}
				}
			}

			.yhq_ljxg {
				width: 480rpx;
				height: 70rpx;
				border-radius: 35rpx;
				background: #FFFFFF;
				text-align: center;
				line-height: 70rpx;
				font-size: 28rpx;
				color: #FF5350;
				font-weight: bold;
				margin: 30rpx auto auto;
				position: absolute;
				left: 0;
				right: 0;
				bottom: 20rpx;
			}

		}

	}

	.getinfo {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;

		.infobtn {
			width: 100%;
			height: 100%;
			opacity: 0;
		}
	}
</style>
